<template>
	<div class="registerContainer">
		<div class="registerInner">
			<div class="register_header">
			</div>
			<!-- 内容部分 -->
			<div class="register_content">
				<form @submit="register">
					<!-- 短信登录 -->
					<div>
						<section class="register_message">
							<input type="tel" maxlength="11" placeholder="手机号" v-model="phone" />
							<button :disabled="!rightPhone" class="get_verification" :class="{right_phone:rightPhone}" @click.prevent="getCode">{{computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}}</button>
						</section>
						<section class="register_verification">
							<input type="tel" maxlength="4" placeholder="验证码" v-model="code">
						</section>
						<section class="register_message">
							<input type="tel" maxlength="11" placeholder="用户名" v-model="name" />
						</section>
						<section class="register_verification">
							<input type="text" maxlength="16" placeholder="密码" v-if="showPwd" v-model="pwd" />
							<input type="password" maxlength="16" placeholder="密码" v-else v-model="pwd" />
							<section class="switch_button" :class="showPwd ? 'on' : 'off'" @click="showPwd = !showPwd">
								<section class="switch_circle" :class="{right : showPwd}"></section>
								<section class="switch_text">{{showPwd ? 'abc' : '....'}}</section>
							</section>
						</section>
						<section class="register_verification">
							<input type="text" maxlength="16" placeholder="重复密码" v-if="showPwd1" v-model="pwd1" />
							<input type="password" maxlength="16" placeholder="重复密码" v-else v-model="pwd1" />
							<section class="switch_button" :class="showPwd1 ? 'on' : 'off'" @click="showPwd1 = !showPwd1">
								<section class="switch_circle" :class="{right : showPwd1}"></section>
								<section class="switch_text">{{showPwd1 ? 'abc' : '....'}}</section>
							</section>
						</section>
						<section class="register_hint">
							温馨提示：注册即表示您已阅读、理解并同意<br>
							<a href="javascript:;">《用户服务协议》</a>
						</section>
					</div>
					<button class="register_submit" @click="register_submit">注册</button>
				</form>
			</div>
		</div>
	</div>
</template>

<script>
	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../components/m-input.vue'
	import {msg} from '../../api/login/login.js'
	import {reg} from '../../api/reg/reg.js'
	export default {
		name: "register",
		data() {
			return {
				phone: '', //手机号,
				computeTime: 0,
				code: '', //验证码
				timer: null,
				showPwd: false,
				showPwd1: false,
				pwd: '',
				pwd1:'',
				name
			};
		},
		computed: {
			rightPhone() {
				//利用正则对手机号匹配
				return /^1[3456789]\d{9}$/.test(this.phone);
			}
		},
		methods: {
			register_submit(){
				this.register();
			},
			getCode() {
				if (!this.computeTime) {
					this.computeTime = 30;
					this.timer = setInterval(() => {
						this.computeTime--;
						if (this.computeTime <= 0) {
							clearInterval(this.timer)
						}
					}, 1000);
					// 短信倒计开始时即请求服务器
					msg({phone:this.phone}).then(res=>{
						this.$message.success("短信已发送");
					})
				}
			},
			register() {
				uni.showLoading({
				    title: '正在注册...'
				});
				if(this.phone.length==0||this.code.length==0||this.pwd.length==0||this.pwd1.length==0||this.name.length==0){
					uni.hideLoading();
					this.$message.error('信息填写不完整');
					return false;
				}
				//短信验证
				var phonereg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!phonereg.test(this.phone)||this.phone.length!=11) {
					uni.hideLoading();
					this.$message.error('手机号不正确');
					return false;
				} 
				if (!/^\d{4}$/.test(this.code)) {
					uni.hideLoading();
					this.$message.error('验证码是4位纯数字');
					return false;
				}
				//用户名和密码验证
				if (this.name.length<2||this.name.length>8) {
					uni.hideLoading();
					this.$message.error('用户名必须是2-8位');
					return false;
				} 
				if(this.pwd.length<8||this.pwd.length>16){
					uni.hideLoading();
					this.$message.error('密码必须是8-16位数字和字母');
					return false;
				}
				if (!/^(?![^a-zA-Z]+$)(?!\D+$)/.test(this.pwd)) {
					uni.hideLoading();
					this.$message.error('密码必须包含数字、字母');
					return false;
				}
				if(this.pwd!=this.pwd1){
					uni.hideLoading();
					this.$message.error("两次输入的密码不一致");
					return false;
				}
				// 注册新用户
				var params = {
						phone:this.phone,
						code:this.code,
						pwd:this.pwd,
						pwd1:this.pwd1,
						name:this.name
					};
				reg(params).then(res=>{
					if(res.code==200){
						uni.hideLoading();
						this.$message.success("注册成功，请登录")
						this.$router.push("../login/login");
					} else {
						uni.hideLoading();
						this.$message.error(res.msg);
						return false;
					}
				});
			}
		}
	};
</script>


<style scoped>
	.registerContainer {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.registerInner {
		width: 80%;
		margin: 0 auto;
		padding-top: 60px;
	}

	.registerInner .register_header .register_logo {
		color: #0faeff;
		font-weight: bolder;
		font-size: 40px;
		text-align: center;
	}

	.register_header .register_header_title {
		text-align: center;
		padding-top: 40px;
	}

	.register_header_title a {
		text-decoration: none;
		font-size: 14px;
		color: #333;
		padding-bottom: 4px;
	}

	.register_header_title a:first-child {
		margin-right: 40px;
	}

	.register_header_title a.on {
		color: #0faeff;
		font-weight: bolder;
		border-bottom: 2px solid #0faeff;
	}

	.register_content form div.on {
		display: block;
	}

	.register_content form input {
		width: 100%;
		height: 100%;
		border: 1px solid #ddd;
		border-radius: 4px;
		outline: none;
		padding-left: 10px;
		box-sizing: border-box;

	}

	.register_content form input:focus {
		border: 1px solid #0faeff;
	}

	.register_message {
		position: relative;
		margin-top: 16px;
		height: 48px;
		font-size: 14px;
		background: #fff;
	}

	.register_message .get_verification {
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		border: none;
		color: #ccc;
		background: transparent;
		font-size: 14px;
	}

	.register_message .get_verification.right_phone {
		color: #000;
	}

	.register_hint {
		text-align: center;
		color: #999;
		margin-top: 12px;
		font-size: 14px;
		line-height: 20px;
	}

	.register_hint a {
		text-decoration: none;
		color: #0faeff;
	}

	.register_verification {
		position: relative;
		margin-top: 16px;
		height: 48px;
		font-size: 14px;
		background: #fff;
	}

	.register_verification .switch_button {
		border: 1px solid #ddd;
		width: 30px;
		height: 16px;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
		border-radius: 8px;
		padding: 0 6px;
		line-height: 16px;
		font-size: 12px;
		transition: background-color 0.3s;

	}

	.register_verification .switch_button.on {
		background: #0faeff;
	}

	.register_verification .switch_button.off {
		background: #fff;
	}

	.switch_button .switch_circle {
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 50%;
		width: 16px;
		height: 16px;
		position: absolute;
		left: -1px;
		top: -1px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	}

	.switch_button .switch_circle.right {
		transform: translateX(30px);
	}

	.switch_button .switch_text {
		color: #ddd;
		float: right;
	}

	.register_submit {
		display: block;
		width: 100%;
		height: 42px;
		margin-top: 30px;
		background: #0faeff;
		border-radius: 4px;
		font-size: 16px;
		line-height: 42px;
		color: #fff;
		text-align: center;
		border: none;
	}
	.register_hint {
		color: #999;
		margin-top: 12px;
		font-size: 14px;
		line-height: 20px;
	}
	
	register_hint a {
		text-decoration: none;
		color: #0faeff;
	}
</style>
